<template>
	<view class="userList">
		<view class="left" v-for="(item, index) in list" :key="index">
			<view :style="
				!item.signUser || item.signUser.isPlanStatus == false ? 'background:#b9b9b9' : item.userId == userinfo.user_id ? 'background:#0091ff' : 'background:#00C6C0'
			" class="useritem">
				<text>{{ item.userName.slice(-2) }}</text>
			</view>

			<view class="call">
				<image src="/static/images/call.png"></image>
				<text @click="callPhone(item.phone)">联系{{ item.userName }}</text>
			</view>
		</view>

	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'user-list',
	props: {
		list: {
			type: Array
		},
		typeSatatus: {
			type: Number
		},

	},
	computed: {
		...mapState('user', ['userinfo']),
	},
	methods: {
		callPhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.userList {
	display: flex;
	justify-content: space-between;
	// border-top: 1rpx solid #e9e9e9;
	background: #fff;
	padding-left: 0;
	padding-bottom: 2rpx;
	align-items: center;
	flex-wrap: wrap;

	.left {
		width: 49%;
		color: #666;
		margin-top: 5px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.useritem {
			color: #fff;
			width: 54rpx;
			height: 54rpx;
			border-radius: 50%;
			text-align: center;
			font-size: 22rpx;
			line-height: 52rpx;
			margin-left: 12rpx;
			overflow: hidden;

			text {
				width: 78rpx;
				display: block;
				margin-left: -12rpx;
				overflow: hidden;
			}
		}
	}

	.call {
		color: #0091ff;
		display: flex;
		align-items: center;
		image{
			width: 40rpx; 
			height: 40rpx;
		}
	}
}
</style>
